<html>
  <head>
    <title>Sample Container</title>
  </head>

  <body>
    <h1>Sample Container</h1>
    <table>
      <tr style="margin: 4px">
        <td><label for="Sandbox.gadgetUrl">Gadget Location:</label></td>
        <td><input type="text" size="50" maxlength="300" id="Sandbox.gadgetUrl" value="examples/open-social-people-api-howto.xml"></td>
        <td><input type="button" value="Add Gadget" onclick="sandbox.addGadget();"/></td>
        <td><input type="button" value="Refresh Gadget" onclick="sandbox.refreshGadget();"/></td>
      </tr>

      <tr style="margin: 4px">
        <td><label for="Sandbox.stateUrl">Container State:</label></td>
        <td><input type="text" size="50" maxlength="300" id="Sandbox.stateUrl" value="examples/state-listfriends.xml"></td>
        <td><input type="button" value="Set State" onclick="sandbox.setState();"/></td>
        <td><input type="button" value="Dump State" onclick="sandbox.dumpState();"/></td>
      </tr>
    

      <tr>
        <td colspan="4"><div id="Sandbox.message" style="margin: 4px"></div></td>
      </tr>
    </table>
    <em>If you this doesn't load for you at first, try clicking "Add Gadget", clicking "Set State", and then reloading. That's what the Google docs say to do.</em>
    <hr>

    <!-- Place holder to inject the gadget html content -->
    <div id="Sandbox_gadgetContent" style="margin: 4px"></div>

    <!-- Place holder to dump current state as XML  -->
    <div id="Sandbox.currentState" style="margin: 4px"></div>

    <!-- Include the mock container here-->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="OpensocialReference.js"></script>
    <script type="text/javascript" src="samplecontainer.js"></script>
    <script type="text/javascript" src="railscontainer.js"></script>
    <script type="text/javascript" src="util.js"></script>
  </body>

</html>
